<template>
        <div v-if="config.showName" class="name" :class="{'left':config.advConfig.titleLeft=='left','center':config.advConfig.titleLeft=='center','right':config.advConfig.titleLeft=='right'}">{{config.name}}</div>
        <div v-for="(param,index) in params">
            <div>{{param.fieldLabel}}</div>
                <input  v-if="param.condition.controlType=='textbox'" v-model="param.value" @change="onChange" :allowClear="true"/>
<!--                <a-select  v-if="param.condition.controlType=='select'" :getPopupContainer="(p) => p.parentNode"-->
<!--                          :allowClear="true"  v-model:value="param.value" @change="onChange" :options="param.condition.options"></a-select>-->
<!--                <a-date-picker-->
<!--                    @change="dateChange($event,param)"-->
<!--                    v-if="param.condition.controlType=='datepicker'"-->
<!--                    format="YYYY-MM-DD HH:mm:ss"-->
<!--                />-->
<!--                <a-range-picker  @change="rangeDateChange($event,param)"-->
<!--                                v-if="param.condition.controlType=='rangepicker'"/>-->
        </div>
</template>

<script>
import {debounce} from 'lodash-es'
import ChartDataModelApi from "@/api/chartDataModel.js";

export default {
    name: "filter-params",
    emits:["paramsChange"],
    props: {
        filterParams: {
            type: Array,
            default:() =>  []
        },
        config:''
    },
    data() {
        return {
            //图表数据
            chartData:[],
            params:[]
        }
    },
    created() {
        this.params=JSON.parse(JSON.stringify(this.filterParams));
        this.getOptions();
    },
    methods: {
        onChange: debounce(function(e) {
            this.$emit("paramsChange",this.params);
        },2000),
        //根据条件配置获取选项
        getOptions(){
            for (let i = 0; i < this.params.length; i++) {
                if(this.params[i].condition.controlType=='select'){
                    let options=[];
                    let condition=this.params[i].condition;
                    //自定义
                    if(condition.from=="self"){
                        let props = JSON.parse(condition.props);
                        for (let i = 0; i < props.length; i++) {
                            options.push({
                                value:props[i].key,
                                label:props[i].name,
                            })
                        }
                        condition["options"]=options;
                    }else if(condition.from=="dic"){
                        ChartDataModelApi.getByDic(condition.dicKey,"").then(res=>{
                            if(res.length && res.length>0){
                                for (let i = 0; i < res.length; i++) {
                                    options.push({
                                        value:res[i].value,
                                        label:res[i].name,
                                    })
                                }
                            }
                            condition["options"]=options;
                        });
                    }else if(condition.from=="sql"){
                        let textfield=condition.sql_textfield;
                        let valuefield=condition.sql_valuefield;
                        ChartDataModelApi.getBySql(condition.sql_name, {}).then(res =>{
                            let data=res.data;
                            if(data.length && data.length>0) {
                                for (let i = 0; i < data.length; i++) {
                                    options.push({
                                        value:data[i][valuefield],
                                        label:data[i][textfield]
                                    })
                                }
                            }
                            condition["options"]=options;
                        });
                    }
                }
            }
        },
        //过滤条件参数变化
        filterParamsChange: debounce(function(e) {
            this.params=JSON.parse(JSON.stringify(this.filterParams));
        },2000),
        //日期变化时
        dateChange(e,param){
            let format= param.condition.format;
            if(!format){
                format="YYYY-MM-DD HH:mm:ss";
            }
            let value = e.format(format);
           param.value=value;
           this.onChange();
        } ,
        //日期范围变化时
        rangeDateChange(e,param){
            let values=[];
            let format= param.condition.format;
            if(!format){
                format="YYYY-MM-DD HH:mm:ss";
            }
            let start = e[0].format(format);
            values.push(start);
            let end = e[1].format(format);
            values.push(end);
            param.value=JSON.stringify(values);
           this.onChange();
        }
    },
    watch:{
        filterParams:{
            handler:function(val,oldval){
                this.filterParamsChange();
            },
            deep:true
        },
        params:function (val,oldVal){
            this.getOptions();
        }
    }
}
</script>

<style scoped>
.left{
    text-align: left;
    line-height: 20px;
    margin-bottom: 9px;
}
.right{
    text-align: right;
    line-height: 20px;
    margin-bottom: 9px;
}
.center{
    text-align: center;
    line-height: 20px;
    margin-bottom: 9px;
}
.name{
    font-size: 15px;
    font-weight: 600;
}
.wrapp{
    width: calc(100% - 40px);
    margin-left: 20px;
    margin-top: 10px;
}
</style>
